<template>
    <div class="discuss-container">
        <van-nav-bar left-text="返回" title="用户评价" left-arrow @click-left="onClickLeft" />
        <van-list v-model="loading" :finished="finished" @load="onLoad">
            <van-cell>
                <div class="content">
                    <div class="head">
                        <!-- 头像昵称 -->
                        <div>
                            <img src="https://cdn.colorhub.me/Xzcap24IyCQ/rs:auto:280:0:0/g:sm/fn:colorhub/bG9jYWw6Ly8vZWMvOTUvYjI4Yjc3ZDk0OGZjYmViOGVhNTZkYmIzM2UyZTgwMWNmZWY3ZWM5NS5qcGVn.jpg"
                                alt="">
                            <p>小**呆</p>
                        </div>
                        <!-- 三个点 -->
                        <van-icon name="ellipsis" />
                    </div>
                    <span class="time">2019.01.01 Axure8 web业务后台管理</span>
                    <div class="text">
                        <p>西贝呆家的原型文件都非常精细不错,支持原创</p>
                        <img class=""
                            src="https://cdn.colorhub.me/-D-HSc5COYc/rs:auto:280:0:0/g:sm/fn:colorhub/bG9jYWw6Ly8vNjQvYTEvYWQ1N2NmYzBkYjFmODgxOTE0MWI3NjZiOTAwMDVlYzY2ZGM4NjRhMS5qcGc.jpg"
                            alt="">
                    </div>
                    <!-- 分割线 -->
                    <van-divider />
                    <div class="add">
                        <span>5天后追评</span>
                        <p>真的非常棒,会回购的</p>
                    </div>
                </div>
            </van-cell>
        </van-list>
        <van-list class="all-discuss">
            <van-cell title="全部评论(6)">
            </van-cell>
            <!-- 全部评论的单条数据 -->
            <van-cell>
                <div class="wrap">
                    <div class="up">
                        <img src="https://cdn.colorhub.me/CqmbmNJ0NbU/rs:auto:280:0:0/g:sm/fn:colorhub/bG9jYWw6Ly8vNDAvNGMvMGEyOTM5YzVlZmY4Zjg5NzcxZDQyYjJmOGQyMWY1ZTBlMDI2NDA0Yy5qcGc.jpg" alt="">
                        <div>
                            <p>小**呆</p>
                            <span>11天前</span>
                        </div>
                    </div>
                    <div class="down">
                        <p>
                            多久发货的呢?
                        </p>
                    </div>
                </div>
            </van-cell>
             <van-cell>
                <div class="wrap">
                    <div class="up">
                        <img src="https://cdn.colorhub.me/CqmbmNJ0NbU/rs:auto:280:0:0/g:sm/fn:colorhub/bG9jYWw6Ly8vNDAvNGMvMGEyOTM5YzVlZmY4Zjg5NzcxZDQyYjJmOGQyMWY1ZTBlMDI2NDA0Yy5qcGc.jpg" alt="">
                        <div>
                            <p>小**呆</p>
                            <span>11天前</span>
                        </div>
                    </div>
                    <div class="down">
                        <p>
                            多久发货的呢?
                        </p>
                    </div>
                </div>
            </van-cell>
        </van-list>
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item icon="chat-o">评论</van-tabbar-item>
            <van-tabbar-item icon="good-job-o">点赞</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

export default {
    data() {
        return {
            active: 0,
            finished: true,
            loading: false,
            list: []
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        // 列表加载时
        onLoad() {

        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    img {
        width: 200px;
    }

    .time {
        color: #999999;
        display: block;
        padding-left: 40px;
    }

    .text {
        padding-left: 40px;

        p {
            padding: 15px 0;
        }
    }

    .head {
        display: flex;
        justify-content: space-between;

        img {
            width: 30px;
            height: 30px;
            border-radius: 15px;
        }

        div {
            align-items: center;
            display: flex;
            // border: 1px solid #000;
            justify-content: space-between;
            width: 80px;
        }
    }

    .add {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 40px;

        span {
            color: #FF7E00;

        }
    }
}

.all-discuss {
    .wrap {
        display: flex;
        flex-direction: column;

        .up {
            display: flex;
            justify-content: flex-start;

            img {
                width: 30px;
                height: 30px;
                border-radius: 15px;
                margin-right: 10px;
            }

            span {
                color: #999999;
                font-size: 12px;
            }
        }
        .down{
            padding-left: 40px;
        }
    }
}
</style>